<style>
  .container {
    position: relative;
    background: #ddd;
  }

  .container>div {
    width: 200px;
    height: 200px;
    /* 注意这里，增加一个 opacity 就可以形成堆叠上下文*/
    /* 触发生成堆叠上下文的条件 */

    /* opacity: 0.9; */
    position: relative
  }

  .float {
    float: left;
    background: deeppink;
    z-index: 2;
  }

  .inline-block {
    display: inline-block;
    background-color: yellowgreen;
    margin-left: -100px;
    z-index: 3;

  }
</style>

<div class="container">
  <!-- inline-block总是在上方 -->
  <div class="inline-block">#div a Display:inline-block</div>
  <div class="float"> #div float:left</div>
</div>